<template>
  <div>
    <el-dialog
        title="签收"
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        :before-close="handleClose"
        width="90%"
    >
      <div class="content">
        <el-form ref="ruleForm" label-position="top" label-width="80px" :rules="rules" :model="formLabelAlign" size="mini">
          <el-form-item label="签收人:" prop="signer">
            <el-input v-model="formLabelAlign.signer" :placeholder="$t('m.please')"></el-input>
          </el-form-item>
          <el-form-item label="签收时间:" class="time">
            <el-button @click="handleShowTime">{{formLabelAlign.time === '' ? '请选择签收时间':formLabelAlign.time}}</el-button>
          </el-form-item>
          <el-form-item label="签收单:" v-if="!showTime">
            <van-uploader v-model="fileList" :before-read="handleBefore" multiple accept="image/*"/>
          </el-form-item>
        </el-form>
        <div class="select-time">
          <van-datetime-picker
              v-if="showTime"
              v-model="currentDate"
              type="datetime"
              title="发车时间"
              @cancel="handleCancel"
              @confirm="handleTime"
          />
        </div>
        <span v-if="!showTime" slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="handleOk">提 交</el-button>
        </span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { $transManagement } from "@/api/transport"
import { toFormData } from "@/assets/js/common"

export default {
  // 组件属性、变量
  props: {
    record: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  // 变量
  data() {
    return {
      dialogVisible: true,
      showTime: false,
      formLabelAlign: {
        time: '',
        signer: ''
      },
      currentDate: new Date(),
      fileList: [], // 文件上传
      rules: {
        signer: [
          { required: true, message: '请输入签收人', trigger: 'blur' }
        ]
      },
      fileName: ['doc','docx','pdf','png','jpg','jpeg']
    }
  },
  // 使用其他组件
  components: {},
  // 方法
  methods: {
    handleClose() {
      this.$emit('handleClose')
    },
    handleCancel() {
      this.showTime = false
    },
    handleTime(value) {
      const date = new Date(value)
      const time = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${date.getHours() > 9 ? date.getHours():'0'+date.getHours()}:${date.getMinutes() > 9 ? date.getMinutes():'0'+date.getMinutes()}`
      this.formLabelAlign.time = time
      this.showTime = false
    },
    handleShowTime() {
      if (this.formLabelAlign.time !== '')
        this.currentDate = new Date(this.formLabelAlign.time)
      this.showTime = true
    },
    // 文件上传前
    handleBefore(file) {
      if(this.fileList.length === 1) return this.$msg.fail('最多只能上传1个文件')
      if (file) {
        const arrName = file.name.split('.')
        const name = arrName[arrName.length - 1]
        if (this.fileName.indexOf(name) === -1) return this.$msg.fail('不允许上传此文件')
        return true
      }
    },
    handleOk() {
      if (this.formLabelAlign.time === '') return this.$msg.fail('请选择签收时间')
      this.$refs['ruleForm'].validate(valid => {
        if (!valid) return false
        this.formLabelAlign.signDate = this.formLabelAlign.time + ':00'
        const obj = {
          ...this.formLabelAlign,
          enclosure: [this.fileList[0].file],
          type: this.record.transportType,
          id: this.record.id,
          transportState: this.record.transportState,
          carrier: this.record.carrier
        }
        delete obj.time
        $transManagement
          .signedIn(toFormData(obj))
          .then(res => {
            if (res.status !== 200) return this.$msg.fail(res.message || res.msg || '出错了')
            this.$msg.success(res.message || res.msg || '签收成功')
            setTimeout(() => {
              this.$router.go(-1)
            }, 300)
          })
          .catch(err => this.$msg.fail(err.message || err.msg || '出错了'))
      })
    }
  }
}
</script>

<style scoped>
/deep/.el-button {
  flex: 1;
  padding: 3.333vw 14.222vw;
}
/deep/.el-dialog__close {
  display: none;
}
/deep/.el-dialog__header {
  padding: 10px;
  font-weight: bold;
  border-bottom: 1px solid #f1f1f1;
}
/deep/.el-dialog__body {
  padding: 10px;
}
/* 修改按钮长度 */
/deep/.time .el-button {
  width: 100%;
  padding-top: 2.333vw !important;
  padding-bottom: 2.333vw !important;
}
/deep/.el-dialog__wrapper {
  scroll: no;
  overflow: hidden;
}
.content {
  position: relative;
  max-height: 80vh;
  overflow-y: scroll;
}
</style>
